{% extends "base.html" %}
{% block content %}

<div class="col-lg-8">


                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">


                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>


                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>


                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>


                        <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>


                    </ol>
                    <div class="carousel-inner">


                        <div class="carousel-item active">

                            <a href="detail.html">
                                <img class="w-100" src="https://tendcode.com/cdn/article/180415/jiandan.png"
                                     alt="容器化部署博客（3）—— 5分钟完成项目迁移">
                            </a>
                        </div>


                        <div class="carousel-item">

                            <a href="/article/set-up-django-with-nginx-and-gunicorn/">
                                <img class="w-100" src="https://tendcode.com/cdn/article/180415/jiandan.png"
                                     alt="在 Linux 服务器上使用 Nginx + Gunicorn 部署 Django 项目的正确姿势">
                            </a>
                        </div>


                        <div class="carousel-item">

                            <a href="/article/virtualenv-for-python/">
                                <img class="w-100" src="https://tendcode.com/cdn/article/180415/jiandan.png"
                                     alt="Python虚拟环境Virtualenv分别在Windows和Linux上的安装和使用">
                            </a>
                        </div>


                        <div class="carousel-item">

                            <a href="/article/jiandan-meizi-spider/">
                                <img class="w-100" src="https://tendcode.com/cdn/article/180415/jiandan.png" alt="煎蛋网妹子图爬虫">
                            </a>
                        </div>

                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                <div class="text-secondary font-weight-bold py-2 f-15 choice">


                    <a class="pb-2  active" href="/">
                        <i class="fa fa-bars mr-1"></i>时间排序</a>

                </div>


                <div class="summary-list">


                    {% for article in articles %}
                    <div class="media mb-1 mb-sm-2 p-2 p-lg-3">
                        <div class="align-self-center mr-2 mr-lg-3 w-25 modal-open">
                            <a href="detail.html" target="_blank">
                                {% if article.img %}
                                <img class="w-100 article-img" src="{{article.img.url}}"
                                     alt="Python 模板渲染库 yaml 和 jinja2 的实战经验分享">
                                {% else %}
                                <img class="w-100 article-img" src="./static/img/default_article_pic.png"
                                     alt="Python 模板渲染库 yaml 和 jinja2 的实战经验分享">
                                {% endif %}
                            </a>
                        </div>
                        <div class="media-body">

                            <div class="text-muted mb-2 f-12">


                                <img class="avatar"
                                     src="https://tendcode.com/media/avatar/2019/07/27/91ef76c6a7efce1b99717f97a851f3deb48f6510.png"
                                     alt="Hopetree">

                                <span>Hopetree</span>
                                <span><i class="fa fa-calendar-times-o ml-2 mr-1"></i>{{article.create_time}}</span>
                            </div>
                            <h2 class="mt-0 font-weight-bold text-info f-17">
                                <a href="/article/{{article.id}}" target="_blank">{{article.title}}</a>
                            </h2>
                            <p class="d-none d-sm-block mb-2 f-15">{{article.content}}</p>
                            <p class="d-block d-sm-none mb-2 f-15">{{article.desc}}</p>
                            <div class="text-muted mb-0 f-12">
                                <a class="cate" href="/category?id={{article.category.id}}" title="查看当前分类下更多文章">
                                    <i class="fa fa-book mr-1"></i>{{article.category}}</a>
                                <span><i class="fa fa-eye ml-2 mr-1"></i>{{article.show_count}}</span>
                                <a href="/article/yaml_and_jinja2/#comment-block" target="_blank" title="查看文章评论">
                                    <i class="fa fa-comments ml-2 mr-1"></i>8</a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}





                </div>
                <div class="text-center mt-2 mt-sm-1 mt-md-0 mb-3 f-16">
                     <a class="text-success" href="/index?page={{ articles.paginator.page_range.0}}">首页</a>
                    {% if articles.has_previous %}
                        <a class="text-success" href="/index?page={{ articles.previous_page_number }}">上一页</a>
                        {% else %}
                        <span class="text-secondary" title="当前页已经是首页">上一页</span>
                    {% endif %}
                    <span class="mx-2">第{{ articles.number }}&nbsp;/&nbsp;{{ articles.paginator.num_pages }}&nbsp;页</span>
                    {% if articles.has_next %}
                         <a class="text-success" href="?page={{ articles.next_page_number }}">下一页</a>
                         {% else %}
                        <span class="text-secondary" title="当前页已经是尾页">下一页</span>
                    {% endif %}
                 <a class="text-success" href="/index?page={{ articles.paginator.num_pages}}">尾页</a>
                </div>
                <div>
                 <a href="/add_article",style="color: yellow">添加微博</a>
                </div>
                <div>
                 <a href="/register",style="color: yellow">注册微博</a>
                </div>
            </div>


{% endblock %}

